<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行情编辑</title>
    <base id="base" href="${basePath}">
    <script src="js/base.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/trades/edit_market.js"></script>
</head>
<style type="text/css">
    .top{
        padding: 0px 15px;
        box-sizing: border-box;
        height: 50px;
        width: 100%;
        line-height: 50px;
        background-color: #424242;
        text-align: center;
        position: fixed;
        top: 0px;
        z-index: 1111111;
    }
    .left_arrow{
        width: 23px;
        height: 25px;
        top: 13px;
        left: 15px;
        background-size: 50%;
        position: absolute;
        background-image: url(../img/arrow_left.png);
        z-index: 100;
    }
    .icon_span{
        width: 35px;
        height: 35px;
        margin-top: 8px;
        margin-right: 40px;
        background-repeat: no-repeat;
    }
    .ChooseNa{
        height: 26px;
        line-height: 25px;
        margin: 0px auto;
    }
    .chooseitem{
        border: 1px solid #E60020;
        height: 100%;
        box-sizing: border-box;
    }
    .settop{
        background-image: url(../img/settop.png);
    }
    .tuodong{
        background-image: url(../img/tuodong.png);
    }
    td{width: 100%;position: relative;}
    table{border-collapse: collapse;}
    table tr{border-bottom:solid 1px #000;}
    .upbtn,.downbtn{
        width: 30px;height: 20px;
        display: block;
        position: absolute;
        top: 33%;
    }
    .upbtn{
        position: absolute;
        right: 55%;
    }
    .downbtn{
        right: 10%;
    }
    .yd{
        text-align: right;
        right: 10px;
    }
    .jypz{
        margin-left: 15px;
    }
    .fx{
        width: 100%;
        position: fixed;
        top:45px;
        z-index: 1111111;
    }
</style>
<body ms-controller="root">
<div class="top"><span class="left_arrow bgBox" ms-click="gohistory"></span>行情<span class="fr" ms-click="gohistory">完成</span></div>
<div style="width: 100%;height: 5px;position: fixed;top:50px;z-index: 1111111;background: #1D1E23;"></div>
<div class="list_title f12 hidden color999 mt10 fx">
    <div class="item_name fl w50">交易品种</div>
    <div class="item_name fl w25 tr">置顶</div>
    <div class="item_name fl w25 tr yd">移动</div>
</div>
<div style="width: 100%;height: 85px;"></div>
<table>
    <tbody class="table">
    <#list products as product>

    <tr row-code="${product.code}" ms-class-jbsg="${product.changeCount}<0"
        ms-class-jbsr="${product.changeCount}>0">
        <td>
            <div class="fl w50">
                <div class="markets_num fl f18 tr jypz">${product.name}</div>
            </div>
        </td>
        <td>
            <a href="javascript:void(0)" class="zd">
                <div class="market_num w25 fl">
                    <span class="inline_block icon_span fr settop"></span>
                </div>
            </a>
            <a href="javascript:void(0)" class="upbtn"><img src="../img/shang.png"/></a>
            <a href="javascript:void(0)" class="downbtn"><img src="../img/xia.png"/></a>
        </td>
    </tr>

    </#list>
    </tbody>
</table>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        //上移
        var $upbtn = $(".upbtn");
        $upbtn.click(function () {
            var $tr = $(this).parents("tr");
            if ($tr.index() != 0) {
                $tr.fadeOut().fadeIn();
                $tr.prev().before($tr);

            }
        });
        //下移
        var $downbtn = $(".downbtn");
        var len = $downbtn.length;
        $downbtn.click(function () {
            var $tr = $(this).parents("tr");
            if ($tr.index() != len - 1) {
                $tr.fadeOut().fadeIn();
                $tr.next().after($tr);

            }
        });
        //置顶
        var $zd = $(".zd");
        $zd.click(function () {
            var $tr = $(this).parents("tr");
            if ($tr.index() != 0) {
                $tr.fadeOut().fadeIn();
                $("tbody").prepend($tr);
            }
        });
    });
    //初始化列表
    var initList = [], domArr = [];
    $('tbody tr').each(function (a) {
        initList[a] = $(this).html();
    })

    //取出所有tr放进数组
    function getDom() {
        $('tbody tr').each(function (m) {
            domArr[m] = $(this);
        });
    }

    //取消颜色高亮
    function colorcancel() {
        $('tbody tr').each(function () {
            var index = $(this).index() + 1;
            var serialnumber = $(this).find("td:first").text();
            if (index == serialnumber) {
                $(this).css("color", "");
            }
        });
    }
</script>
</html>
